#@layout()

#define script()
<script>
    function del(id) {
        ajaxGet("#(CPATH)/admin/wechat/doMenuDel/" + id)
    }

    $("#menuSync").on("click", function () {
        ajaxGet("#(CPATH)/admin/wechat/doMenuSync",function (result) {
            toastr.success(result.message);
        })

    });


</script>
#end

#define content()
    <section class="content-header">

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">

                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h1>
                                公众号菜单
                                <small data-toggle="tooltip" title="" data-placement="right"
                                       data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                                <small> 首页 / 微信 / 公众号菜单</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>

    <section class="content">

        <div class="row">
            <div class="col-lg-5">
                <div class="card card-outline card-primary">

                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class=" form-setting autoAjaxSubmit" autocomplete="off"
                          action="#(CPATH)/admin/wechat/doMenuSave"
                          data-ok-href="#(CPATH)/admin/wechat/menu"
                          method="post">
                        <input type="hidden" name="menu.id" value="#(menu.id ??)">
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span class="text-danger mr-2">*</span> 名称</label>

                                <div class="col-sm-9">
                                    <input type="input" class="form-control" placeholder="取个适合的名称..." required
                                           value="#(menu.text ??)" name="menu.text">

                                    <p class="text-muted">
                                        名称将显示在微信公众号的底部菜单。
                                    </p>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span class="text-danger mr-2">*</span> 类型</label>

                                <div class="col-sm-9">
                                    <select class="form-control" name="menu.type" required>
                                        <option value="click" #selectedIf(menu && 'click' == menu.type)>触发关键字</option>
                                        <option value="view" #selectedIf(menu && 'view' == menu.type)>链接到网页</option>
                                        <option value="miniprogram" #selectedIf(menu && 'miniprogram' == menu.type)>跳转微信小程序</option>
                                        <option value="scancode_push" #selectedIf(menu && 'scancode_push' == menu.type)>扫码推事件</option>
                                        <option value="scancode_waitmsg" #selectedIf(menu && 'scancode_waitmsg' == menu.type)>扫码推事件且弹出“消息接收中”提示框</option>
                                        <option value="pic_sysphoto" #selectedIf(menu && 'pic_sysphoto' == menu.type)>弹出系统拍照发图</option>
                                        <option value="pic_photo_or_album" #selectedIf(menu && 'pic_photo_or_album' == menu.type)>弹出拍照或者相册发图</option>
                                        <option value="pic_weixin" #selectedIf(menu && 'pic_weixin' == menu.type)>弹出微信相册发图器</option>
                                        <option value="location_select" #selectedIf(menu && 'location_select' == menu.type)>弹出地理位置选择器</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"><span class="text-danger mr-2">*</span> 关键字</label>

                                <div class="col-sm-9">
                                    <input type="input" class="form-control" placeholder="..." required
                                           value="#(menu.keyword ??)" name="menu.keyword">
                                    <p class="text-muted">
                                        链接到网页请填写URL地址（必须是 http 开头），跳转微信小程序填写格式为 appid:page
                                    </p>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">父级</label>

                                <div class="col-sm-9">
                                    <select class="form-control" name="menu.pid">
                                        #if(menu && menu.pid == 0)
                                        <option value="0" selected>顶级</option>
                                        #else
                                        <option value="0">顶级</option>
                                        #end

                                        #for(m : menus)
                                        #if(menu && menu.pid == m.id)
                                        <option value="#(m.id)" selected>#(m.layerString) #(m.text)</option>
                                        #elseif(menu && (menu.id == m.id || menu.isMyChild(m.id)))
                                        <option value="#(m.id)" disabled>#(m.layerString) #(m.text)</option>
                                        #else
                                        <option value="#(m.id)">#(m.layerString) #(m.text)</option>
                                        #end
                                        #end
                                    </select>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">排序</label>
                                <div class="col-sm-9">
                                    <input type="input" class="form-control" placeholder="此分类排序的序号"
                                           name="menu.order_number"
                                           value="#(menu.order_number ??)">
                                    <p class="text-muted"> 越小的数字越靠前，只在同级分类上影响。 </p>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <div class="offset-sm-2 col-sm-10 submit-block">
                                <div class="card-submit">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-footer -->
                    </form>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="card card-outline card-primary">

                    <div class="card-header with-border">
                        <button type="button" id="menuSync" class="btn btn-primary float-right">
                            <i class="fas fa-redo"></i> 同步到微信
                        </button>
                    </div>

                    <div class="card-body p-0  ">

                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th style="width: 50%">菜单名称</th>
                                <th>菜单类型</th>
                                <th>关键字</th>
                                <th>排序</th>
                            </tr>
                            #for(menu : menus)
                            <tr>
                                <td>
                                    #(menu.layerString) #(menu.text ??)
                                    <div class="jp-action-card">
                                        <div class="jp-action-body">
                                            <a href="#(CPATH)/admin/wechat/menu/#(menu.id)">编辑</a> |
                                            <a href="javascript:;" onclick="del('#(menu.id??)')"
                                               style="color: #a00">删除</a>
                                        </div>
                                    </div>
                                </td>
                                <td>#(menu.typeStr ??)</td>
                                <td>#(menu.keyword ??)</td>
                                <td>#(menu.order_number ??)</td>
                            </tr>
                            #else
                            <tr class="nodata"><td colspan="999">暂无数据</td> </tr>
                            #end
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-12">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card -->
            </div>
            </div>
    </section>
#end
